<template>
  <div class="payInfo">
    <div class="content">
      <!--报名信息-->
      <van-card
        :num="orderDetail.number"
        :price="orderDetail.unitPrice.toFixed(2)"
        :desc="orderDetail.submitTime"
        :title="orderDetail.name"
        :thumb="orderDetail.mainImage"
      />
      <van-collapse v-model="activeNames" v-if="false">
        <van-collapse-item title="报名信息" name="1">
          <div class="desc" v-for="i in 3" :key="i">
            <span style="flex-shrink: 0">姓名：</span><span>11</span>
          </div>
        </van-collapse-item>
      </van-collapse>
      <!--票价信息-->
      <van-cell title="总金额" :value="'￥'+orderDetail.orderAmount.toFixed(2)"/>
      <van-cell title="订单实付金额" v-if="orderDetail.status == '1'">
        <template #right-icon>
          <span class="custom-title" style="color: #ee0a24">￥{{orderDetail.orderAmount.toFixed(2)}}</span>
        </template>
      </van-cell>
      <van-cell class="orderSn" title="订单编号" :value="orderDetail.orderSn"/>
      <van-cell title="创建时间" :value="orderDetail.submitTime"/>
      <van-cell title="支付时间" v-if="orderDetail.status == '1'" :value="orderDetail.payTime"/>
      <van-button type="primary" v-if="orderDetail.status == '1'" @click="toHome" style="width: 80%;display: block;margin: 15px auto;">返回首页</van-button>
    </div>
    <!--去支付-->
    <van-submit-bar v-if="orderDetail.status == '0'" :price="orderDetail.orderAmount * 100" button-text="去支付" @submit="onSubmit"/>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
  name: 'PayInfo',
  data () {
    return {
      activeNames: ['1'],
      orderId:0,
      orderDetail:{
        name:'',
        mainImage:'',
        status:'',
        orderSn:'',
        payTime:'',
        submitTime:'',
        number:1,
        unitPrice:0,
        orderAmount:0
      }
    }
  },
  created () {
    this.orderId = +this.$route.query.orderId
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail(){
      this.$http.post('/actOrder/myOrderById',this.orderId).then(res => {
        if (res.state == '200') {
          this.orderDetail = res.data
        }else{
          this.$toast(res.message)
        }
      })
    },
    toHome(){
      this.$router.push('/')
    },
    onSubmit () {
      this.$http.post('/jsapiPay',this.orderId).then(res => {
        if (res.state == '200') {
          wx.chooseWXPay({
            timestamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            signType: res.data.signType,
            paySign: res.data.paySign, // 支付签名
            success: function(res) {
              // 支付成功跳转路由(路由push无效)
              window.location.href = "https://wx.fanxingwenchuan.com/#/PayResult";
            },
            fail: function(res) {
              alert("支付失败")
            },
            cancel: function(res){
              alert("您取消了支付")
            }
          })
        }else{
          this.$toast(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.payInfo {
  height: 100vh;
  background-color: #f4f5f6;

  .content {
    padding-bottom: 50px;
  }
  /deep/ .van-collapse-item__content{
    background-color: #f1f1f1;
    max-height: 400px;
    overflow-y: auto;
    .desc {
      padding: 5px 0;
      display: flex;
      align-items: flex-start;
    }
  }
}
/deep/ .van-card{
  background-color: #fff;
  margin-bottom: 10px;
}
/deep/ .van-card__content {
  .van-card__title{
    font-size: 15px;
    margin-bottom: 5px;
  }
}

.orderSn /deep/ .van-cell__value{
  flex: 3;
}
</style>
